<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="video" class="pic_video" playsinline autoplay x5-video-player-type="h5" style='object-fit:fill'></video>
<button onclick="moveToCameraAVG()">dianji</button>
<script>
    function moveToCameraAVG() {
        var self = this;
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        if (window.stream) {
            window.stream.getTracks().forEach(track => {
                track.stop();
            });
        }
        var constraints = window.constraints = {
            audio: false,
            video: {
                sourceId: 'default',
                facingMode:  'user'
            }
        };
        navigator.mediaDevices.getUserMedia(constraints)
            .then(stream => {
                var video = document.getElementById('video');
                try {
                    window.stream = stream;
                    video.srcObject = stream;
                } catch (error) {
                    video.src = window.URL.createObjectURL(stream);
                }
                self.localMediaStream = stream;
                video.play();
            })
            .catch(function (err) {
                console.info(err.name + ": " + err.message);
        });
    }
</script>
</body>
</html>